<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default" id="header">
    <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">

            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            Amaze UI
        </a>
    </h1>
    <div class="am-header-right am-header-nav">
        <a href="#right-link" class="">
            <i class="am-header-icon am-icon-bars"></i>
        </a>
    </div>
</header>
<div id="main" class="am-g">

</div>

<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="menu">
    <ul class="am-navbar-nav am-cf am-avg-md-4 am-avg-md-4 am-avg-lg-4">
        <li tapmode="hover" onclick="randomSwitchBtn(this)">
            <a href="###" class="" >
                <span class="am-icon-phone"></span>
                <span class="am-navbar-label">呼叫</span>
            </a>
        </li>
        <li data-am-navbar-share tapmode="hover" onclick="randomSwitchBtn(this)">
            <a href="###" class="" >
                <span class="am-icon-share-square-o"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
        <li data-am-navbar-qrcode tapmode="hover" onclick="randomSwitchBtn(this)">
            <a href="###" class="" >
                <span class="am-icon-qrcode"></span>
                <span class="am-navbar-label">二维码</span>
            </a>
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn(this)" >
            <a href="###" class="" >
                <span class="am-icon-github"></span>
                <span class="am-navbar-label">GitHub</span>
            </a>
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
        funIniGroup();
    };
    function funIniGroup(){
        var eHeaderLis = $api.domAll('#menu li'),
            frames = [];
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {
            frames.push( {
                name: 'frame'+i,
                url: 'html/frame'+i+'.html',
                bgColor : 'rgba(0,0,0,.2)',
                bounces:true
            } )
        }
        var header = $api.byId('header');
        var menu = $api.byId('menu');
        $api.fixStatusBar(header);
        var headerH = $api.offset(header).h;
        var menuH = $api.offset(menu).h;
        //frame的高度为当前window高度减去header和footer的高度
        var frameH = api.winHeight - headerH - menuH;
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: headerH,
                w: api.winWidth,
                h: frameH
            },
            index: 0,
            frames: frames
        }, function (ret, err) {

        });
    }

    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        console.log(tag);
        if( tag == $api.dom('#menu li.active') )return;
        var menuLis = $api.domAll('#menu li'),
            index = 0;
        for (var i = 0,len = menuLis.length; i < len; i++) {
            if( tag == menuLis[i] ){
                index = i;
            }else{
                $api.removeCls(menuLis[i], 'active');
            }
        }
        $api.addCls( menuLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }
</script>
</html>
